<template>
  <div class="custom-panel">
      <el-form
        ref="form"
        :inline-message="false"
        :status-icon="true"
        :model="formData"
        :label-width="lwidth||'160px'"
        size="large"
        :hide-required-asterisk="true"
        class="ser-form ope-form"
      >
        <el-row v-for="(domain, index) in cols">
          <el-col :span="23">
            <el-form-item :label="domain.title+':'" v-if="domain.readonly" >
              {{ formData[domain.field] || "-" }}
            </el-form-item>

            <el-form-item
              v-else
              :label="domain.title +':'"
              :key="domain.field"
              :prop="domain.field"
            >
              <el-date-picker
                v-if="domain.type === 'date'"
                v-model="formData[domain.field]"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
              <el-date-picker
                v-else-if="domain.type === 'datetime'"
                v-model="formData[domain.field]"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              >
              </el-date-picker>
              <el-input
                v-else-if="domain.type === 'textarea'"
                type="textarea"
                maxlength="200"
                show-word-limit
                v-filterSpecialChar
                :rows="4"
                placeholder="请输入内容"
                v-model="formData[domain.field]"
              >
              </el-input>
              <el-input
                v-else
                v-model="formData[domain.field]"
                v-filterSpecialChar
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>
<script>
export default {
  name: 'headerpassword',
  data() {
    return {
      cols: this.columns,
      lwidth: this.labelWidth,
      formData: this.data,
    };
  },
  props: {
    columns: {
      type: Array,
      required: true,
      default() {
        return [];
      },
    },
    labelWidth: String,
    data: {
      type: Object,
      default() {
        return {};
      },
    }
  },
  watch: {
    labelWidth(val) {
      this.lwidth = val;
    },
    columns(val) {
      this.cols = val;
    }
  },
  computed: {},
  methods: {
    close() {
      this.resetForm();
      this.dialogVisible = false;
    },

    resetForm() {
      this.formData = {};
      this.$refs['form'].resetFields();
    },
    // 确定
    save() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          this.$emit('close', this.formData);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.custom-panel {
  width: 100%;
  max-height: 600px;
  overflow: auto;
}
</style>
